<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>指令v-model的参数</title>
    </head>
    <body>

        <h3>为v-model指令设置参数</h3>

        <div id="app">
            <!-- 在 `v-model:` 之后 `=` 之前即为 参数名称 ( 比如 `login-name` 、`password` ) -->
            <!-- 在 `v-model` 指令的 `=` 之后即为绑定的 属性名称 ( 比如 `username` 、`password` ) -->
            <user-input v-model:login-name="username"
                        v-model:password="password">
            </user-input>
            <div>
                <p>username: {{ username }}</p>
                <p>password: {{ password }}</p>
            </div>
        </div>

         <!-- 导入 vue.js 3.x 核心库 -->
         <script src="../scripts/vue@3.2.31.js"></script>

         <script>

             const UserInput = {
                 props: [ 'loginName' , 'password' ],
                 template: `<div>
                                 <input type="text" :value="loginName" @input="handle1">
                                 <input type="text" :value="password" @input="handle2">
                            </div>`,
                 methods: {
                    handle1(evt){
                        // 获取事件目标的 value 属性值
                        let value = evt.target.value ;
                        // 触发 `update:loginName` 事件并将获取到的值传递过去
                        this.$emit( 'update:loginName' , value );
                    },
                    handle2(evt){
                        // 获取事件目标的 value 属性值
                        let value = evt.target.value ;
                        // 触发 `update:password` 事件并将获取到的值传递过去
                        this.$emit( 'update:password' , value );
                    }
                 }
             }

             const options = {
                data(){
                    return {
                        username: 'saneng',
                        password: 'hello'
                    }
                },
                components: {
                    'user-input': UserInput
                }
             }
             Vue.createApp(options).mount('#app');
         </script>
        
    </body>
</html>